// 合同变更
<template>
  <div class="contractChange">
    <div class="title">变更记录</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="recordTime" label="变更时间" width="300" align="center" />
      <el-table-column prop="createName" label="操作人" width="300" align="center" />
      <el-table-column prop="remarks" label="变更说明" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="viewHis(scope.row)">查看原合同</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="历史合同信息" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
      <div>
        <!--合同信息-->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card>
              <div slot="header" class="clearfix">
                <span>合同预览</span>
              </div>
              <div class="text item">
                <div class="pdf">
                  <div @click="dialogContractVisible = true">
                    <pdf :src="formData.contractUrl" :page="1" />
                  </div>
                  <br />
                  <span>{{formData.lessorpropertyNames}}</span>
                  <!--弹出合同详细内容-->
                  <el-dialog
                    title="合同详情"
                    :visible.sync="dialogContractVisible"
                    fullscreen
                    width="60%"
                    :before-close="handleClose"
                    :close-on-click-modal="false"
                  >
                    <el-row>
                      <pdf :src="formData.contractUrl" :page="pageNum" @num-pages="pageTotalNum=$event" @link-clicked="page = $event" />
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                      <el-row style="text-align: center;">
                        <h3>
                          <span>{{pageNum}}/{{pageTotalNum}}</span>
                        </h3>
                      </el-row>
                      <el-row style="text-align: center;">
                        <el-button type="primary" @click.stop="prePage">上一张</el-button>
                        <el-button type="primary" @click="dialogContractVisible = false">关闭</el-button>
                        <el-button type="primary" @click.stop="nextPage">下一张</el-button>
                      </el-row>
                    </span>
                  </el-dialog>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>出租方信息</span>
                </div>
                <div class="text item">
                  <el-row>
                    <el-form class="form-wrap" :model="propForm" size="small" ref="propForm">
                      <el-form-item label="出租方名称:">
                        <span>{{propForm!=null?propForm.lessorName:""}}</span>
                      </el-form-item>
                      <el-form-item label="出租方类型:">
                        <span>{{propForm.lessorType|dict('lessee_type')}}</span>
                      </el-form-item>
                      <!-- 第一行第3列-->
                      <el-form-item v-show="propForm !=null && propForm.lessorType=='0'" label="证件类型:">
                        <span>{{propForm.certificateType|dict('personage_certificate_type')}}</span>
                      </el-form-item>
                      <el-form-item v-show="propForm!=null && propForm.lessorType!='0'" label="证件类型:">
                        <span>{{propForm.certificateType|dict('commercial_certificate_type')}}</span>
                      </el-form-item>
                      <!-- 第一行第4列-->
                      <el-form-item label="证件号码:">
                        <span>{{propForm!=null?propForm.certificateNum:""}}</span>
                      </el-form-item>

                      <!-- 第二行-->
                      <!-- 如果不是 "个人"，则会将下面一行会显示出来-->
                      <el-form-item v-show="propForm!=null && propForm.lessorType!=0" label="法人代表:">
                        <span>{{propForm!=null?propForm.legalPerson:""}}</span>
                      </el-form-item>
                      <el-form-item v-show="propForm!=null &&  propForm.lessorType!=0" label="身份证号码:">
                        <span>{{propForm!=null?propForm.legalIdentityCard:""}}</span>
                      </el-form-item>
                      <el-form-item v-show="propForm!=null && propForm.lessorType!=0" label="手机号码:">
                        <span>{{propForm!=null?propForm.phoneNum:""}}</span>
                      </el-form-item>
                      <el-form-item v-show="propForm!=null && propForm.lessorType!=0" label="固定电话:">
                        <span>{{propForm!=null?propForm.telephone:""}}</span>
                      </el-form-item>
                    </el-form>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>合同信息</span>
                </div>
                <div class="text item">
                  <el-row>
                    <el-form :model="formData" class="form-wrap" size="small">
                      <el-form-item label="签订方式" prop="signType">
                        <span>{{formData.signType|dict('rent_signing_method')}}</span>
                      </el-form-item>
                      <el-form-item label="合同签订日期" prop="signDate">
                        <span>{{formData.signDate}}</span>
                      </el-form-item>
                      <el-form-item label="合同开始日期" prop="startDate">
                        <span>{{formData.startDate}}</span>
                      </el-form-item>
                      <el-form-item label="合同结束日期" prop="endDate">
                        <span>{{formData.endDate}}</span>
                      </el-form-item>
                      <el-form-item label="起租日期" prop="rentStartDate">
                        <span>{{formData.rentStartDate}}</span>
                      </el-form-item>
                      <el-form-item label="合同类型">
                        <span>{{formData.type|dict('rent_contract_type')}}</span>
                      </el-form-item>
                      <el-form-item label="合同细类">
                        <span>{{formData.subType|dict('rent_contract_sub_type')}}</span>
                      </el-form-item>
                      <el-form-item label="建筑面积" prop="buildingArea">
                        <span>{{formData.buildingArea}}</span>
                      </el-form-item>
                      <el-form-item label="月租金" prop="rentAmount">
                        <span>{{formData.rentAmount}}</span>
                      </el-form-item>
                      <el-form-item label="收费方式" prop="feeType">
                        <span>{{formData.feeType|dict('rent_fee_type')}}</span>
                      </el-form-item>
                      <el-form-item v-if="formData.feeType=='6'" label="自定义收费周期（月）" prop="feeTypeValue">
                        <span>{{formData.feeTypeValue}}</span>
                      </el-form-item>
                      <el-form-item label="应付日" prop="feeDate">
                        <span>{{formData.feeDate}}</span>
                      </el-form-item>
                      <el-form-item label="审批方式" prop="approveType">
                        <span>{{formData.approveType|dict('rent_contract_approve_type')}}</span>
                      </el-form-item>
                      <el-form-item label="管理所" prop="administrativeOffice">
                        <span>{{formData.administrativeOffice|dict('administrative_office')}}</span>
                      </el-form-item>
                      <el-form-item label="备注" prop="remarks">
                        <span>{{formData.remarks}}</span>
                      </el-form-item>
                    </el-form>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>物业信息</span>
                </div>
                <div class="text item">
                  <el-row>
                    <el-table :data="propertyInformation" stripe align="center" style="width: 100%">
                      <el-table-column type="index" align="center" width="50"></el-table-column>
                      <el-table-column label="物业名称" align="center" prop="propertyName" width="50"></el-table-column>
                      <el-table-column label="建筑面积（㎡）" align="center" prop="buildingArea" width="100"></el-table-column>
                      <el-table-column label="物业评估价（元/㎡/月）" align="center" prop="assessPrice" width="150"></el-table-column>
                      <el-table-column prop="price" align="center" label="单价（元/㎡/月）" width="100"></el-table-column>
                      <el-table-column prop="remarks" align="center" label="说明" width="100"></el-table-column>
                    </el-table>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>租金标准</span>
                </div>
                <div class="text item">
                  <el-row>
                    <el-table :data="rentFeeInformation" stripe style="width: 100%">
                      <el-table-column prop="startDate" label="开始时间" width="100"></el-table-column>
                      <el-table-column prop="endDate" label="结束时间" width="100"></el-table-column>
                      <el-table-column prop="priceFinal" label="月租金" width="100"></el-table-column>
                      <el-table-column prop="remarks" label="说明" width="100"></el-table-column>
                    </el-table>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>其他费用</span>
                </div>
                <div class="text item">
                  <el-row>
                    <el-table :data="contractFee" style="width: 100%">
                      <el-table-column prop="chargeProjectName" label="费用项目名称" width="180"></el-table-column>
                      <el-table-column prop="feeStadard" label="收费标准" width="180"></el-table-column>
                      <el-table-column prop="amount" label="金额" width="180"></el-table-column>
                    </el-table>
                  </el-row>
                </div>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">浏览完毕</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import { getHisList, getHistoryContract } from '@/views/wy-lessor/rentalSociety/api/contract.js'
import { getObj as getClientManage } from '@/views/wy-lessor/landlord/api/lessor.js'
export default {
  name: 'contractChange',
  components: {
    pdf,
  },
  data () {
    return {
      //出租方内容展示
      propForm: '',
      //合同详情
      formData: '',
      //合同预览
      pageNum: 1,
      pageTotalNum: '',
      page: '',
      dialogContractVisible: false,
      dialogVisible: false,
      tableData: [],
      propertyInformation: [],
      rentFeeInformation: [],
      contractFee: [],
    }
  },

  mounted: function () {
    //   this.loadHisList();
  },

  methods: {
    //合同预览
    //上一页
    prePage () {
      var p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    //下一页
    nextPage () {
      var p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //加载列表
    loadHisList (contractId) {
      //alert("11");
      let rentContractId = contractId;//this.$route.query.id;
      //alert(rentContractId);
      getHisList(rentContractId)
        .then(response => {
          //alert(JSON.parse(response.data));
          if (response.data.code == 0) {
            this.tableData = response.data.data;
          }
          else {
            this.$alert("加载变更记录服务端服务错误" + response.code);
          }
        }
        )

    },

    async viewHis (row) {
      this.dialogVisible = true
      const response = await getHistoryContract(row.rentContractHisId);
      let formData = response.data.data;
      this.formData = formData;
      this.rentFeeInformation = formData.rentContractDetailHis
      this.propertyInformation = formData.rentContractRoomHis
      this.contractFee = formData.rentContractProfeeHis
      //获得出租方信息
      const propForm = await getClientManage(this.formData.customerId)
      this.propForm = propForm.data.data;
      console.log(this.propForm)
      console.log(this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>
@include formWrap();
.contractChange {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px;
    color: #333;
  }
  /deep/ .el-table {
    .el-table__header {
      border-color: #dee2e6;
    }
    thead th {
      background-color: #fafafa;
      color: #333;
    }
    td {
      padding: 10px 0;
    }
  }
}
</style>
